<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Football Test1</title>
<link href="/PFJSP/css/footballtest1.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">
	$(init);

	function init() {
		$('.player').draggable({
			revert: true,
			cursor: "move",
			helper: handleHelper
		});
		$('.droppable').droppable({
			drop : handleDropEvent,
			hoverClass: "hvdrop",
		});
	}

	function handleHelper(event) {
		return '<div id="draggableHelper">I am a helper - drag me!</div>_____________________$tag_';
	}

	function handleDropEvent(event, ui) {
		var e = ui.draggable;
		e.position({
            of: $(this),
            my: 'center center',
            at: 'center center'
        });
		e.draggable( 'option', 'revert', false );
		alert('Line: ' + $(this).parent().attr("id") + '\nColumn: ' +$(this).attr("id")+'\nJogador: '+ e.attr("id"));
	}
</script>

</head>



<body>

	<div id="squadbox">
		<p:panel id="squadheader">Squad</p:panel>
		<div id="squadteam">
			<div id="100" class="player"></div>
		</div>
	</div>

	<div id="fieldbox">
		<table id="fieldtable">
			<tr id="aa">
				<td id="0" class="droppable"></td>
				<td id="1" class="droppable"></td>
				<td id="2" class="droppable"></td>
				<td id="3" class="droppable"></td>
				<td id="4" class="droppable"></td>
			</tr>
			<tr id="am">
				<td id="5" class="droppable"></td>
				<td id="6" class="droppable"></td>
				<td id="7" class="droppable"></td>
				<td id="8" class="droppable"></td>
				<td id="9" class="droppable"></td>
			</tr>
			<tr id="ad">
				<td id="10" class="droppable"></td>
				<td id="11" class="droppable"></td>
				<td id="12" class="droppable"></td>
				<td id="13" class="droppable"></td>
				<td id="14" class="droppable"></td>
			</tr>
			<tr id="ma">
				<td id="15" class="droppable"></td>
				<td id="16" class="droppable"></td>
				<td id="17" class="droppable"></td>
				<td id="18" class="droppable"></td>
				<td id="19" class="droppable"></td>
			</tr>
			<tr id="mm">
				<td id="20" class="droppable"></td>
				<td id="21" class="droppable"></td>
				<td id="22" class="droppable"></td>
				<td id="23" class="droppable"></td>
				<td id="24" class="droppable"></td>
			</tr>
			<tr id="md">
				<td id="25" class="droppable"></td>
				<td id="26" class="droppable"></td>
				<td id="27" class="droppable"></td>
				<td id="28" class="droppable"></td>
				<td id="29" class="droppable"></td>
			</tr>
			<tr id="da">
				<td id="30" class="droppable"></td>
				<td id="31" class="droppable"></td>
				<td id="32" class="droppable"></td>
				<td id="33" class="droppable"></td>
				<td id="34" class="droppable"></td>
			</tr>
			<tr id="dm">
				<td id="35" class="droppable"></td>
				<td id="36" class="droppable"></td>
				<td id="37" class="droppable"></td>
				<td id="38" class="droppable"></td>
				<td id="39" class="droppable"></td>
			</tr>
			<tr id="dd">
				<td id="40" class="droppable"></td>
				<td id="41" class="droppable"></td>
				<td id="42" class="droppable"></td>
				<td id="43" class="droppable"></td>
				<td id="44" class="droppable"></td>
			</tr>
			<tr id="gk">
				<td id="45" class="droppable"></td>
				<td id="46" class="droppable"></td>
				<td id="47" class="droppable"></td>
				<td id="48" class="droppable"></td>
				<td id="49" class="droppable"></td>
			</tr>
		</table>
	</div>
</body>
</html>